<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="../dist/img/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="../dist/img/favicon-16x16.png" sizes="16x16" type="image/png">
    <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
    <meta name="description" content="bootstrap-admin基于bootstrap5的免费开源的响应式后台管理模板">
    <meta name="author" content="ajiho">
    <link rel="stylesheet" href="../lib/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css">
    <style>



        .fc .fc-col-header-cell-cushion {
            text-decoration: none;
            color: red;
        }

        .fc-theme-standard .fc-scrollgrid {
            border: 1px solid var(--bs-border-color)
        }

        .fc .fc-daygrid-day-number {
            color: green;
            text-decoration: none;
        }

    </style>
    <link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
    <title>bootstrap-admin开源免费响应式后台管理系统模板</title>
</head>
<body class="bg-body-tertiary py-3">
<div class="container-fluid">
    <!--  正文内容放置在此处  -->

    <!--  为了美观,建议大家都把新内容都放card组件里面  -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
            新页面标题
        </div>
        <div class="card-body overflow-auto">
            <div id='calendar' style="min-width: 800px"></div>
        </div>
    </div>

    <!--回到顶部开始-->
    <a href="javaScript:" class="bsa-back-to-top"><i class='bi bi-arrow-up-short'></i></a>
    <!--回到顶部结束-->

</div>

<script src="../lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../lib/jquery/dist/jquery.min.js"></script>
<script src="../lib/@fullcalendar/core/index.global.min.js"></script>
<script src="../lib/@fullcalendar/core/locales/zh-cn.global.min.js"></script>
<script src="../lib/@fullcalendar/daygrid/index.global.min.js"></script>
<script src="../lib/@fullcalendar/timegrid/index.global.min.js"></script>
<script src="../lib/@fullcalendar/interaction/index.global.min.js"></script>
<script src="../lib/@fullcalendar/list/index.global.min.js"></script>
<script src="../lib/@fullcalendar/multimonth/index.global.min.js"></script>
<script src="../dist/js/bootstrap-admin.min.js"></script>
<script src="../dist/js/app.js"></script>
<script>
    $(document).ready(function (e) {

        let date = new Date()
        let d = date.getDate(),
            m = date.getMonth(),
            y = date.getFullYear()




        let calendarEl = document.getElementById('calendar');
        let calendar = new FullCalendar.Calendar(calendarEl, {
            locale: 'zh-cn',
            initialView: 'dayGridMonth',
            headerToolbar: {
                start: 'prev,next today',
                center: 'title',
                end: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
            },
            themeSystem: 'bootstrap',
            buttonText: {
                today: '今天',
                month: '月',
                week: '周',
                day: '天',
                list: '列表'
            },
            events: [
                {
                    title: '全天事件',
                    start: new Date(y, m, 1),
                    backgroundColor: '#f56954', //red
                    borderColor: '#f56954', //red
                    allDay: true
                },
                {
                    title: '跨天事件',
                    start: new Date(y, m, d - 5),
                    end: new Date(y, m, d - 2),
                    backgroundColor: '#f39c12', //yellow
                    borderColor: '#f39c12' //yellow
                },
                {
                    title: '会议',
                    start: new Date(y, m, d, 10, 30),
                    allDay: false,
                    backgroundColor: '#0073b7', //Blue
                    borderColor: '#0073b7' //Blue
                },
                {
                    title: '吃午饭',
                    start: new Date(y, m, d, 12, 0),
                    end: new Date(y, m, d, 14, 0),
                    allDay: false,
                    backgroundColor: '#00c0ef', //Info (aqua)
                    borderColor: '#00c0ef' //Info (aqua)
                },
                {
                    title: '生日时刻',
                    start: new Date(y, m, d + 1, 19, 0),
                    end: new Date(y, m, d + 1, 22, 30),
                    allDay: false,
                    backgroundColor: '#00a65a', //Success (green)
                    borderColor: '#00a65a' //Success (green)
                },
                {
                    title: '点击百度',
                    start: new Date(y, m, 28),
                    end: new Date(y, m, 29),
                    url: 'https://www.baidu.com/',
                    backgroundColor: '#3c8dbc', //Primary (light-blue)
                    borderColor: '#3c8dbc' //Primary (light-blue)
                }
            ],
            editable: true, // 确定是否可以修改日历上的事件。
            eventLimit: true, // 当事件太多时允许“更多”链接
            droppable: true, // this allows things to be dropped onto the calendar !!!
            drop: function (info) {
                console.log('drop');
            },
            dateClick: function (info, jsEvent, view) {
                console.log('dateClick');
            },
            eventClick: function (info) {
                console.log(info)

                if (info.event.url) {
                    //阻止默认事件提交
                    info.jsEvent.preventDefault();
                    window.open(info.event.url);
                }
            }
        });
        calendar.render();
    })
</script>
</body>
</html>